<ui:composition template="/templates/default.xhtml"
				xmlns="http://www.w3.org/1999/xhtml"
				xmlns:h="http://java.sun.com/jsf/html"
				xmlns:f="http://java.sun.com/jsf/core"
				xmlns:o="http://openfaces.org/"
				xmlns:ui="http://java.sun.com/jsf/facelets"
				xmlns:c="http://java.sun.com/jstl/core">
				
		    <ui:define name="title">OpenHDS - Create Vaccination</ui:define>
		
			<ui:param name="crud" value="#{vaccinationCrud}" />
			
			<ui:define name="listing">
				<ui:include src="list.xhtml" />
			</ui:define>

            <ui:define name="display">         		
         	    <h:outputText value="#{navController.breadcrumbTrail}" />
         		
               <h1>#{msg.vaccinationCreate}</h1>
               <h:messages id="error" globalOnly="true" />
               <h:form id="vaccinationForm">
                    <h:panelGrid columns="4">
                    
                    	<h:outputText value="#{msg.vaccinationChild}:"/>
                        <h:outputText />
                        <h:inputText tabindex="1" styleClass="individual" autocomplete="off" id="childExtId" value="#{vaccinationCrud.item.child}" converter="#{individualExtIdConverter}" />
                        <h:message for="childExtId" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

						<h:outputText value="#{msg.fieldWorkerId}:"  />
                    	<h:outputText />
                    	<h:inputText tabindex="2" styleClass="collectedBy" autocomplete="off" id="collectedBy" value="#{vaccinationCrud.item.collectedBy}" converter="#{fieldWorkerExtIdConverter}" />
                    	<h:message for="collectedBy" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

						<h:outputText value="#{msg.vaccinationBCG}: (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser tabindex="2" id="bcg" value="#{vaccinationCrud.bcg}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="bcg" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                    	
                    	<h:outputText value="#{msg.vaccinationPolio1}: (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser tabindex="3" id="polio1" value="#{vaccinationCrud.polio1}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="polio1" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                    	
                    	<h:outputText value="#{msg.vaccinationPolio2}: (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser tabindex="4" id="polio2" value="#{vaccinationCrud.polio2}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="polio2" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                        
                        <h:outputText value="#{msg.vaccinationPolio3}: (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser tabindex="5" id="polio3" value="#{vaccinationCrud.polio3}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="polio3" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                        
                        <h:outputText value="#{msg.vaccinationPolio4}: (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser tabindex="6" id="polio4" value="#{vaccinationCrud.polio4}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="polio4" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                        
                        <h:outputText value="#{msg.vaccinationDpt1}: (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser tabindex="7" id="dpt1" value="#{vaccinationCrud.dpt1}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="dpt1" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                        
                        <h:outputText value="#{msg.vaccinationDpt2}: (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser tabindex="8" id="dpt2" value="#{vaccinationCrud.dpt2}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="dpt2" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                        
                        <h:outputText value="#{msg.vaccinationDpt3}: (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser tabindex="9" id="dpt3" value="#{vaccinationCrud.dpt3}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="dpt3" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                        
                        <h:outputText value="#{msg.vaccinationMeasels}: (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser tabindex="10" id="measels" value="#{vaccinationCrud.measels}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="measels" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
					</h:panelGrid>
                    <br />
                    <h:commandButton tabindex="11" value="#{msg.lblCreate}" action="#{vaccinationCrud.create}" />
                </h:form>
            </ui:define>
        </ui:composition>
